<template>
  <div class="information">
    <div class="outer">
      <div class="inner">
        <div class="back">
          <van-icon @click="goBack()" name="arrow-left" />
        </div>
        <div class="logo">
          <van-image
            round
            width="80px"
            height="80px"
            fit="cover"
            :src="hospital.logo"
          />
        </div>
        <div class="name">{{ hospital.name }}</div>
      </div>
    </div>

    <div class="info">
      <div class="row">
        <!-- 图标 -->
        <div class="icon">
          <i class="iconfont">&#xe811;</i>
        </div>
        <!-- 内容 -->
        <div class="name">
          {{ hospital.name }}
        </div>
      </div>
      <div class="row">
        <!-- 图标 -->
        <div class="icon">
          <i class="iconfont">&#xe822;</i>
        </div>
        <!-- 内容 -->
        <div class="name">
          {{ hospital.type }}
        </div>
      </div>
      <div class="row">
        <!-- 图标 -->
        <div class="icon">
          <i class="iconfont">&#xe791;</i>
        </div>
        <!-- 内容 -->
        <div class="name">
          {{ hospital.detail }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      hospital: this.$route.query
    }
  },
  created(){
    // console.log(this.$route.query);
  },
  methods: {
    goBack(){
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="less" scoped>
.information{
  padding-bottom: 60px;
  .iconfont{
    font-size: 25px;
  }
  .outer{
    background-color: @blue-dark;
    position: relative;
    left: -10vw;
    width: 120vw;
    height: 62vw;
    border-bottom-right-radius: 120vw;
    border-bottom-left-radius: 120vw;
    .inner{
      background-color: @blue-light;
      position: absolute;
      left: 10vw;
      width: 100vw;
      height: 60vw;
      // border: 1px ;
      border-bottom-right-radius: 100vw;
      border-bottom-left-radius: 100vw;
      div{
        text-align: center;
      }
      .back{
        font-size: 20px;
        text-align: left;
        line-height: 46px;
        padding-left: 16px;
        color: @blue;
      }
      .logo{
        margin: 15px 0 30px;
      }
      .name{
        // color: @blue;
        margin: auto;
        width: 60vw;
        font-weight: bolder;
        font-size: 25px;
      }
    }
  
  }
  .info{
    margin-top: 20px;
    padding: 10px;
    .row{
      margin: 5px 0;
      display: flex;
      font-size: 20px;
      padding: 10px 2px;
      padding-left: 24px;
      .icon{
        margin-right: 10px;
      }
    }
    .active{
      padding-left: 20px;
      border-left: 4px solid @blue;
      background-color: @blue-light;
    }
  }
}
</style>